<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空气质量数据分析</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* 正文文字样式 */
        body {
            background-image: url('C:/Users/asus/Desktop/HTML CSS/img/绿水青山.png');
            background-size: cover;
            background-repeat: no-repeat;
        }

        p {
            line-height: 1.6;
            font-size: 18px;
            margin-bottom: 15px;
        }

       .visualization-section {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 2rem;
            margin-top: 2rem;
        }

        /* 表单样式 */
       .form-group {
            margin-bottom: 1rem;
        }

       .form-group label {
            display: block;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

       .form-group textarea {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }

        /* 模型评估部分样式 */
       .model-evaluation-section {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 2rem;
            margin-top: 2rem;
        }

       .error-message {
            color: red;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
    </style>
</head>

<body class="bg-gray-100">
    <!-- 导航栏 -->
    <nav class="bg-blue-500 p-4 text-white">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">空气质量数据分析</h1>
            <ul class="flex space-x-4">
                <li><a href="https://baijiahao.baidu.com/s?id=1830148037303623450&wfr=spider&for=pc"
                        class="hover:underline">相关新闻</a></li>
                <li><a href="https://www.aqistudy.cn/historydata/" class="hover:underline">数据来源</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="container mx-auto p-4">
        <main>
            <!-- 新闻视频，调整路径为实际视频路径 -->
            <video src="video/3.mp4" controls>
                您的浏览器不支持视频播放。
            </video>
            <p>在当今社会，碳排放已经成为一个备受关注的全球性问题。它不仅对环境造成了严重的影响，还威胁着人类的健康和可持续发展。然而，碳排放并非由单一因素导致，而是受到多种元素的综合影响。</p>
            <p>其中，能源结构是一个关键因素。传统的化石能源，如煤炭、石油和天然气的大量使用，是碳排放的主要来源。这些能源在燃烧过程中会释放出大量的二氧化碳等温室气体，加剧全球气候变暖。相比之下，可再生能源，如太阳能、风能、水能等，具有清洁、可持续的特点，使用它们可以显著减少碳排放。</p>
            <img src="GIF/4.gif" width="70%">
            <p>工业生产也是影响碳排放的重要方面。制造业、化工、钢铁等行业在生产过程中需要消耗大量的能源，并产生大量的废气。通过改进生产工艺、提高能源利用效率和采用清洁生产技术，可以有效地降低工业生产中的碳排放。</p>
            <p>此外，交通和物流也是影响碳排放的重要环节。城市交通的发展和物流行业的发展也会增加碳排放。通过优化交通网络、减少车辆使用、采用电动自行车和公共交通等方式，可以减少交通中的碳排放。还有许多其他因素也会影响碳排放。例如，能源政策的变化、气候变化的影响等。这些因素的变化可能会导致能源需求的变化，进而影响碳排放的水平。</p>
            <p> 在此web网页可以通过计算得出对应的数据分析图和政策模拟前后的碳排放量对比，进而更加方便我们来分析多元因素对碳排放的影响</p>
            <p><strong> 基于python算法对PM2.5值与时间的可视化操作 </strong> </p>
            <p><img src="img/pm2.5与时间.png" width="700"></p>
            <p><strong> 基于python算法对碳排放值与天气的可视化操作 </strong> </p>
            <p><img src="img/不同天气碳排放.png" width="700"></p>
            <p><strong> 基于python算法对不同城市碳排放量对比的可视化操作 </strong> </p>
            <p><img src="img/城市碳排放对比.png" width="700"></p>
            <p><strong> 基于python算法对碳排放量与节假日的可视化操作 </strong> </p>
            <p><img src="img/节假日碳排放对比.png" width="700"></p>
            <p><strong> 用随机森林以及政策模拟算法对数据的计算分析 </strong> </p>
            <p><img src="img/政策模拟.png" width="500">  <img src="img/随机森林回归.png" width="500"></p>
            <p><img src="img/数值结果.png" width="700"></p>
        </main>
        <!-- 数据可视化部分 -->
        <section id="visualization" class="mt-8 visualization-section">
            <h2 class="text-2xl font-bold mb-4">数据可视化</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- 不同城市的碳排放柱状图 -->
                <div class="bg-white p-4 rounded shadow">
                    <h3 class="text-xl font-bold mb-2">不同城市的平均碳排放对比</h3>
                    <canvas id="cityCarbonChart"></canvas>
                </div>
                <!-- 随着时间变化的pm2.5折线图 -->
                <div class="bg-white p-4 rounded shadow">
                    <h3 class="text-xl font-bold mb-2">PM2.5浓度随时间的变化</h3>
                    <canvas id="pm25TimeChart"></canvas>
                </div>
                <!-- 不同天气情况下的碳排放箱线图 -->
                <div class="bg-white p-4 rounded shadow">
                    <h3 class="text-xl font-bold mb-2">不同天气情况下的碳排放分布</h3>
                    <canvas id="weatherCarbonChart"></canvas>
                </div>
                <!-- 是否为节假日与碳排放的关系柱状图 -->
                <div class="bg-white p-4 rounded shadow">
                    <h3 class="text-xl font-bold mb-2">节假日与非节假日的平均碳排放对比</h3>
                    <canvas id="holidayCarbonChart"></canvas>
                </div>
            </div>
        </section>
        <form id="dataForm">
            <div class="form-group">
                <label for="trafficCondition">交通情况:</label>
                <textarea class="form-control" id="trafficCondition" placeholder="每行输入一个交通情况"></textarea>
            </div>
            <div class="form-group">
                <label for="weatherCondition">天气情况:</label>
                <textarea class="form-control" id="weatherCondition" placeholder="每行输入一个天气情况" oninput="updateCharts()"></textarea>
            </div>
            <div class="form-group">
                <label for="isHoliday">是否为节假日:</label>
                <textarea class="form-control" id="isHoliday" placeholder="每行输入一个是否为节假日（是/否）" oninput="updateCharts()"></textarea>
                <span class="error-message" id="isHolidayError"></span>
            </div>
            <div class="form-group">
                <label for="hour">小时:</label>
                <textarea class="form-control" id="hour" placeholder="每行输入一个小时数" oninput="updateCharts()"></textarea>
                <span class="error-message" id="hourError"></span>
            </div>
            <div class="form-group">
                <label for="weekday">星期几:</label>
                <textarea class="form-control" id="weekday" placeholder="每行输入一个星期几（1 - 7）"></textarea>
                <span class="error-message" id="weekdayError"></span>
            </div>
            <div class="form-group">
                <label for="pm25">PM2.5:</label>
                <textarea class="form-control" id="pm25" placeholder="每行输入一个PM2.5值" oninput="updateCharts()"></textarea>
                <span class="error-message" id="pm25Error"></span>
            </div>
            <div class="form-group">
                <label for="carbonEmission">碳排放:</label>
                <textarea class="form-control" id="carbonEmission" placeholder="每行输入一个碳排放值" oninput="updateCharts()"></textarea>
                <span class="error-message" id="carbonEmissionError"></span>
            </div>
            <div class="form-group">
                <label for="cityNames">城市名称:</label>
                <textarea class="form-control" id="cityNames" placeholder="每行输入一个城市名称" oninput="updateCharts()"></textarea>
            </div>
        </form>

        <!-- 模型评估部分 -->
        <section id="model-evaluation" class="mt-8 model-evaluation-section">
            <h2 class="text-2xl font-bold mb-4">模型评估</h2>
            <div class="bg-white p-4 rounded shadow">
                <h3 class="text-xl font-bold mb-2">随机森林回归模型评估</h3>
                <label for="mseInput">均方误差 (MSE):</label>
                <input type="number" id="mseInput" placeholder="输入均方误差" oninput="updatePredictionChart()">
                <label for="r2Input">决定系数 (R²):</label>
                <input type="number" id="r2Input" placeholder="输入决定系数" oninput="updatePredictionChart()">
                <canvas id="predictionChart"></canvas>
            </div>
            <div class="bg-white p-4 rounded shadow mt-4">
                <h3 class="text-xl font-bold mb-2">政策模拟评估</h3>
                <label for="originalMseInput">政策实施前均方误差:</label>
                <input type="number" id="originalMseInput" placeholder="输入政策实施前均方误差" oninput="updatePolicyChart()">
                <label for="policyMseInput">政策实施后均方误差:</label>
                <input type="number" id="policyMseInput" placeholder="输入政策实施后均方误差" oninput="updatePolicyChart()">
                <label for="originalR2Input">政策实施前决定系数:</label>
                <input type="number" id="originalR2Input" placeholder="输入政策实施前决定系数" oninput="updatePolicyChart()">
                <label for="policyR2Input">政策实施后决定系数:</label>
                <input type="number" id="policyR2Input" placeholder="输入政策实施后决定系数" oninput="updatePolicyChart()">
                <canvas id="policyChart"></canvas>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-200 p-4 text-center mt-8">
        <p>&copy; 2025 空气质量数据分析</p>
    </footer>

    <script>
        // 初始化图表，使用空数据
        const cityCarbonChart = new Chart(document.getElementById('cityCarbonChart'), {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: '平均碳排放',
                    data: [],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const pm25TimeChart = new Chart(document.getElementById('pm25TimeChart'), {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'PM2.5浓度',
                    data: [],
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1,
                    fill: false
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const weatherCarbonChart = new Chart(document.getElementById('weatherCarbonChart'), {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: '碳排放',
                    data: [],
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const holidayCarbonChart = new Chart(document.getElementById('holidayCarbonChart'), {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: '平均碳排放',
                    data: [],
                    backgroundColor: 'rgba(255, 205, 86, 0.2)',
                    borderColor: 'rgba(255, 205, 86, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const predictionChart = new Chart(document.getElementById('predictionChart'), {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: '真实值',
                    data: [],
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    fill: false
                }, {
                    label: '预测值',
                    data: [],
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1,
                    fill: false
                }]
            },
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: '真实碳排放值'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: '预测碳排放值'
                        }
                    }
                }
            }
        });

        const policyChart = new Chart(document.getElementById('policyChart'), {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: '政策实施前预测值',
                    data: [],
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1,
                    fill: false
                }, {
                    label: '政策实施后预测值',
                    data: [],
                    borderColor: 'rgba(255, 205, 86, 1)',
                    borderWidth: 1,
                    fill: false
                }]
            },
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: '真实pm2.5值'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: '预测pm2.5值'
                        }
                    }
                }
            }
        });

        function updateCharts() {
            const isHolidayValues = document.getElementById('isHoliday').value.split('\n').filter(Boolean);
            const hourValues = document.getElementById('hour').value.split('\n').filter(Boolean);
            const weekdayValues = document.getElementById('weekday').value.split('\n').filter(Boolean);
            const pm25Values = document.getElementById('pm25').value.split('\n').filter(Boolean).map(Number);
            const carbonEmissionValues = document.getElementById('carbonEmission').value.split('\n').filter(Boolean).map(Number);
            const cityNames = document.getElementById('cityNames').value.split('\n').filter(Boolean);
            const weatherValues = document.getElementById('weatherCondition').value.split('\n').filter(Boolean);

            let isValid = true;

            // 验证是否为节假日
            const isHolidayError = document.getElementById('isHolidayError');
            isHolidayError.textContent = '';
            for (const value of isHolidayValues) {
                if (!['是', '否'].includes(value)) {
                    isHolidayError.textContent = '请输入“是”或“否”';
                    isValid = false;
                    break;
                }
            }

            // 验证小时数
            const hourError = document.getElementById('hourError');
            hourError.textContent = '';
            for (const value of hourValues) {
                const num = parseInt(value);
                if (isNaN(num) || num < 0 || num > 23) {
                    hourError.textContent = '请输入0 - 23之间的整数';
                    isValid = false;
                    break;
                }
            }

            // 验证星期几
            const weekdayError = document.getElementById('weekdayError');
            weekdayError.textContent = '';
            for (const value of weekdayValues) {
                const num = parseInt(value);
                if (isNaN(num) || num < 1 || num > 7) {
                    weekdayError.textContent = '请输入1 - 7之间的整数';
                    isValid = false;
                    break;
                }
            }

            // 验证PM2.5值
            const pm25Error = document.getElementById('pm25Error');
            pm25Error.textContent = '';
            for (const value of pm25Values) {
                if (isNaN(value) || value < 0) {
                    pm25Error.textContent = '请输入非负数字';
                    isValid = false;
                    break;
                }
            }

            // 验证碳排放值
            const carbonEmissionError = document.getElementById('carbonEmissionError');
            carbonEmissionError.textContent = '';
            for (const value of carbonEmissionValues) {
                if (isNaN(value) || value < 0) {
                    carbonEmissionError.textContent = '请输入非负数字';
                    isValid = false;
                    break;
                }
            }

            if (!isValid) {
                return;
            }

            const maxLength = Math.max(pm25Values.length, carbonEmissionValues.length, cityNames.length, weatherValues.length, isHolidayValues.length);

            // 不同城市的碳排放柱状图
            cityCarbonChart.data.labels = cityNames.length > 0 ? cityNames : Array.from({ length: maxLength }, (_, i) => `数据点 ${i + 1}`);
            cityCarbonChart.data.datasets[0].data = carbonEmissionValues;
            cityCarbonChart.update();

            // 随着时间变化的pm2.5折线图
            pm25TimeChart.data.labels = hourValues.length > 0 ? hourValues : Array.from({ length: maxLength }, (_, i) => `数据点 ${i + 1}`);
            pm25TimeChart.data.datasets[0].data = pm25Values;
            pm25TimeChart.update();

            // 不同天气情况下的碳排放箱线图
            weatherCarbonChart.data.labels = weatherValues.length > 0 ? weatherValues : Array.from({ length: maxLength }, (_, i) => `数据点 ${i + 1}`);
            weatherCarbonChart.data.datasets[0].data = carbonEmissionValues;
            weatherCarbonChart.update();

            // 是否为节假日与碳排放的关系柱状图
            holidayCarbonChart.data.labels = isHolidayValues.length > 0 ? isHolidayValues : Array.from({ length: maxLength }, (_, i) => `数据点 ${i + 1}`);
            holidayCarbonChart.data.datasets[0].data = carbonEmissionValues;
            holidayCarbonChart.update();

            // 预测值和真实值散点图
            predictionChart.data.labels = Array.from({ length: maxLength }, (_, i) => `数据点 ${i + 1}`);
            predictionChart.data.datasets[0].data = carbonEmissionValues.map(val => ({ x: val, y: val }));
            predictionChart.data.datasets[1].data = carbonEmissionValues.map(val => ({ x: val, y: val }));
            predictionChart.update();

            // 政策模拟前后散点图
            policyChart.data.labels = Array.from({ length: maxLength }, (_, i) => `数据点 ${i + 1}`);
            policyChart.data.datasets[0].data = pm25Values.map(val => ({ x: val, y: val }));
            policyChart.data.datasets[1].data = pm25Values.map(val => ({ x: val, y: val }));
            policyChart.update();

            // 填充模型评估指标
            const mseInput = document.getElementById('mseInput').value;
            const r2Input = document.getElementById('r2Input').value;
            const originalMseInput = document.getElementById('originalMseInput').value;
            const policyMseInput = document.getElementById('policyMseInput').value;
            const originalR2Input = document.getElementById('originalR2Input').value;
            const policyR2Input = document.getElementById('policyR2Input').value;

            document.getElementById('mse-value').textContent = mseInput || '待填充';
            document.getElementById('r2-value').textContent = r2Input || '待填充';
            document.getElementById('original-mse-value').textContent = originalMseInput || '待填充';
            document.getElementById('policy-mse-value').textContent = policyMseInput || '待填充';
            document.getElementById('original-r2-value').textContent = originalR2Input || '待填充';
            document.getElementById('policy-r2-value').textContent = policyR2Input || '待填充';

            // 更新预测图表
            updatePredictionChart();
            // 更新政策模拟图表
            updatePolicyChart();
        }

        function updatePredictionChart() {
            const mseInput = parseFloat(document.getElementById('mseInput').value);
            const r2Input = parseFloat(document.getElementById('r2Input').value);
            const carbonEmissionValues = document.getElementById('carbonEmission').value.split('\n').filter(Boolean).map(Number);

            if (isNaN(mseInput) || isNaN(r2Input) || carbonEmissionValues.length === 0) {
                return;
            }

            // 简单示例：根据MSE和R²计算预测值
            const predictedValues = carbonEmissionValues.map(val => {
                // 这里简单假设预测值为真实值加上一个基于MSE和R²的调整值
                const adjustment = mseInput * (1 - r2Input);
                return val + adjustment;
            });

            const maxLength = carbonEmissionValues.length;
            predictionChart.data.labels = Array.from({ length: maxLength }, (_, i) => `数据点 ${i + 1}`);
            predictionChart.data.datasets[0].data = carbonEmissionValues.map(val => ({ x: val, y: val }));
            predictionChart.data.datasets[1].data = predictedValues.map(val => ({ x: val, y: val }));
            predictionChart.update();
        }

        function updatePolicyChart() {
            const originalMseInput = parseFloat(document.getElementById('originalMseInput').value);
            const policyMseInput = parseFloat(document.getElementById('policyMseInput').value);
            const originalR2Input = parseFloat(document.getElementById('originalR2Input').value);
            const policyR2Input = parseFloat(document.getElementById('policyR2Input').value);
            const pm25Values = document.getElementById('pm25').value.split('\n').filter(Boolean).map(Number);

            if (isNaN(originalMseInput) || isNaN(policyMseInput) || isNaN(originalR2Input) || isNaN(policyR2Input) || pm25Values.length === 0) {
                return;
            }

            // 简单示例：根据MSE和R²计算预测值
            const originalPredictedValues = pm25Values.map(val => {
                const adjustment = originalMseInput * (1 - originalR2Input);
                return val + adjustment;
            });

            const policyPredictedValues = pm25Values.map(val => {
                const adjustment = policyMseInput * (1 - policyR2Input);
                return val + adjustment;
            });

            const maxLength = pm25Values.length;
            policyChart.data.labels = Array.from({ length: maxLength }, (_, i) => `数据点 ${i + 1}`);
            policyChart.data.datasets[0].data = originalPredictedValues.map(val => ({ x: val, y: val }));
            policyChart.data.datasets[1].data = policyPredictedValues.map(val => ({ x: val, y: val }));
            policyChart.update();
        }
    </script>
</body>

</html>    